<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>防抖</title>
</head>

<body>
    <div>
        <input id="inp" @compositionstart="compositionstart" @compositionend="compositionend"/>
    </div>
    <script>
        function debounce(fn,timeout) {
            let timer = null
            // 创建一个标记用来存放定时器的返回值
            return function() {
                clearTimeout(timer)
                // 每当用户输入的时候把前一个 setTimeout clear 掉
                timer = setTimeout(() => {
                    // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
                    fn.apply(this, arguments)
                }, timeout)
            }
        }
        function sayHi(e) {
            if(!falg){
                console.log('防抖成功')
                console.log(e.target.value);
            }
        }
        let falg=false;
        var inp =document.getElementById('inp')
        // inp.addEventListener('input',debounce(sayHi,520)) // 防抖
        inp.addEventListener('input',debounce(function(e){
            console.log(e.target.value)
        },250))
        
        // 触发于一段文字的输入之前，也就是在输入一段需要的文本或语音开始输入时会触发。
        inp.addEventListener('compositionstart',function(){
            falg=true;
            console.log(111111111)
        })
        inp.addEventListener('compositionend',function(){
            falg=false;
            console.log(111111111)
        })
    </script>
</body>
